@import '../../../../shared/scss/selected_theme_variables';
.image-container {
  .thumbnails-selected-image {
    background: $white none repeat scroll 0% 0% / auto padding-box border-box;
    max-width: 100%;
    width: 100%;
    margin: auto;
    object-fit: scale-down;
    @media only screen and (min-width: 320px) and (max-width: 767px) {
      width: auto;
      margin: auto;
      height: auto;
      object-fit: scale-down;
      mix-blend-mode: darken;
    }
  }
  .thumbnails-vertical-container {
    width: 60px;
    float: left;
    margin-bottom: 10px;
    .thumbnails-thumbnail-button {
      outline: 0;
      margin-right: 15px;
      background-color: $white;
      border: 0;
      padding: 0;
      position: relative;
      cursor: pointer;
      margin-bottom: 10px;
    }
  }
}

:host {
  /deep/ .banner {
    .ngucarouselPoint {
      list-style-type: none;
      padding: 3px;
      white-space: nowrap;
      overflow: auto;
      left: 0;
      box-sizing: border-box;
      background-color: $white;
      margin: 0 auto -28px;
      align-self: center;
      width: fit-content;
      border-radius: 5px 5px 0 0;
      bottom: 27px;
      cursor: pointer;
      @media (min-width: '768px') {
        bottom: 0;
      }
    }

    .ngucarouselPoint li {
      display: inline-block;
      border-radius: 999px;
      background-color: $theme-main-color;
      border: 1px solid $theme-main-color;
      padding: 5px;
      margin: 0 3px;
      transition: 0.4s ease all;
    }

    .ngucarouselPoint li.active {
      background-color: $white;
    }

    .bannerStyle {
      img {
        height: 240px;
        margin: auto;
        width: auto !important;
      }
    }
  }
}

img {
  display: block;
}

.img1 {
  width: 400px;
  height: 274px;
}

.img2 {
  width: 200px;
  height: 020px;
}
